<template>
  <div class="nav-rights">
    <div class="nav-right">
      <div class="bill_box">
        <section>
          <div class="table-inner action-box open">
            <div class="action-inner">
              <section class="trade-group merchant-top">
                  <i class="merchant-icon tips"></i>
                  <span class="tips-word">请选择充值方式</span>
              </section>
              <Form ref="formValidate0" :model="formValidate0" :label-width="85">
                <FormItem label="充值方式" prop="payMode">
                  <Select v-model="formValidate0.payMode" size="large" @on-change="handleReset('formValidate1')">
                    <Option v-for="item in rechargeNameList" :value="item.key" :key="item.key">{{ item.label }}</Option>
                  </Select>
                </FormItem>
              </Form>
              <div class="divide-box"></div>
              <div>
                <Form v-show="showForm" ref="formValidate1" :model="formValidate1" :rules="ruleValidate" :label-width="85">
                  <!-- bankName -->
                  <FormItem label="充值金额" prop="balance">
                    <Input v-model="formValidate1.balance" number size="large"></Input>
                  </FormItem>
                  <template v-if="formValidate0.payMode === '0'">
                    <FormItem label="商家二维码">
                      <img style="width: 200px;height: 200px;" :src="sysUser.aliPayUri">
                    </FormItem>
                  </template>
                  <template v-if="formValidate0.payMode === '1'">
                    <FormItem label="商家二维码">
                      <img style="width: 200px;height: 200px;" :src="sysUser.wechatPayUri">
                    </FormItem>
                  </template>
                  <template v-if="formValidate0.payMode === '2'">
                    <!-- bankName -->
                    <FormItem :label="$t('uc.account.bankaccount')">
                      <p>{{ sysUser.bankInfo.bank }}</p>
                    </FormItem>
                    <!-- bankBranch -->
                    <FormItem :label="$t('uc.account.bankbranch')">
                      <p>{{ sysUser.bankInfo.branch }}</p>
                    </FormItem>
                    <!-- bankNo -->
                    <FormItem :label="$t('uc.account.bankno')">
                      <p>{{ sysUser.bankInfo.cardNo }}</p>
                    </FormItem>
                  </template>
                  <template v-if="formValidate0.payMode === '3'">
                    <!-- companyName -->
                    <FormItem :label="$t('uc.account.companyname')">
                      <p>{{ sysUser.company.companyName }}</p>
                    </FormItem>
                    <!-- bankName -->
                    <FormItem :label="$t('uc.account.bankaccount')">
                      <p>{{ sysUser.company.companyBank }}</p>
                    </FormItem>
                    <!-- bankBranch -->
                    <FormItem :label="$t('uc.account.bankbranch')">
                      <p>{{ sysUser.company.companyBankBranch }}</p>
                    </FormItem>
                    <!-- bankNo -->
                    <FormItem :label="$t('uc.account.companybankno')">
                      <p>{{ sysUser.company.companyBankCardNo }}</p>
                    </FormItem>
                  </template>
                  <FormItem label="充值凭证" prop="qrcode">
                    <div class="qrcode-box">
                      <input type="hidden" name="qrcode" :value="formValidate1.qrcode" />
                      <img v-if="formValidate1.qrcode" alt="请上传您的转账凭证" style="width: 216px;" :src="formValidate1.qrcode" >
                      <img v-else alt="请上传您的转账凭证" style="width: 216px;" src="../../assets/images/upload_placeholder.png">
                      <div class="acc_sc">
                        <Upload ref="upload2" :on-success="payHandleSuccess" :headers="uploadHeaders" :action="uploadUrl">
                          <Button icon="ios-cloud-upload-outline">{{$t('uc.safe.upload')}}</Button>
                        </Upload>
                      </div>
                    </div>
                  </FormItem>
                  <!-- passwd -->
                  <FormItem :label="$t('uc.account.fundpwd')" prop="jypassword">
                        <Input v-model="formValidate1.jypassword" type="password" size="large"></Input>
                  </FormItem>
                  <FormItem label="备注" prop="remark">
                      <Input v-model="formValidate1.remark" type="text" size="large"></Input>
                  </FormItem>
                    <!-- Button -->
                  <FormItem>
                  <Button type="primary" :style="{ width: '100%' }" @click="handleSubmit('formValidate1')">充值</Button>
                  </FormItem>
                </Form>
                <p v-show="!showForm">{{ formMsg }}</p>
              </div>
            </div>
            <div class="action-content">
              <div class="action-body">
                <p class="acb-p1">{{$t('common.tip')}}</p>
                <p class="acb-p2">
                  • 为了保证您的资金安全，请您转账成功之后，上传转账记录凭证，方便我们后期核实。<br>
                  • {{$t('uc.finance.recharge.msg5')}}
                </p>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import VueQriously from "vue-qriously";
Vue.use(VueQriously);

export default {
  components: {
    VueQriously
  },
  inject: ['reload'],
  data() {
    const validateBalance = (rule, value, callback) => {
      var reg = /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/;
      if (value === '' || parseFloat(value) === 0) {
        callback(new Error(this.$t('uc.account.balancemsg1')));
      } else if (!reg.test(value)) {
        callback(new Error(this.$t('uc.account.balancemsg1')));
      } else {
        callback();
      }
    };
    return {
      loading: true,
      uploadHeaders:{'x-auth-token':localStorage.getItem('TOKEN')},
      uploadUrl:this.host+'/api/uc/upload/oss/image',
      showForm: true,
      formMsg: '',
      rechargeNameList: [{
        key: '0',
        label: '支付宝'
      }, {
        key: '1',
        label: '微信'
      }, {
        key: '2',
        label: '银联'
      }, {
        key: '3',
        label: '公司账户'
      }],
      formValidate0: {
        payMode: '0',
      },
      formValidate1: {
        balance: 0,
        name: '',
        jypassword: '',
        bankName: '',
        bankBranch: '',
        bankNo: '',
        bankNoConfirm: '',
        remark: '',
        qrcode: ''
      },
      user: {},
      sysUser: {
        bankInfo: {},
        company: {}
      },
      ruleValidate: {
        balance: [{ required: true, type: 'number', validator: validateBalance, trigger: 'blur' }],
        jypassword: [
          { required: true, message: this.$t('uc.account.fundpwdmsg1'), trigger: 'blur' },
          { min: 6, message: this.$t('uc.account.fundpwdmsg2'), trigger: 'blur' }
        ],
        qrcode: [{ required: true, message: '请上传充值凭证', trigger: 'blur' }],
      }, 
    };
  },
  methods: {
    handleReset(name) {
      this.$refs[name].resetFields();
      this.formMsg = '您未绑定' + this.rechargeNameList[this.formValidate0.payMode].label + '，不能进行此操作。';
      if(this.formValidate0.payMode === '0' && this.user.aliVerified === 1) {
        this.showForm = true;
      } else if(this.formValidate0.payMode === '1' && this.user.wechatVerified === 1) {
        this.showForm = true;
      } else if(this.formValidate0.payMode === '2' && this.user.bankVerified === 1) {
        this.showForm = true;
      } else if(this.formValidate0.payMode === '3' && this.user.companyBankVerified === 1) {
        this.showForm = true;
      } else {
        this.showForm = false;
      }
    },
    payHandleSuccess (res, file, fileList) {
      this.$refs.upload2.fileList = [fileList[fileList.length-1]];
      this.formValidate1.qrcode = res.data.uri;
    },
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$http.post(this.host + '/api/uc/legal-balance-wallet-deposit', {
            balance: this.formValidate1.balance,
            payMode: this.formValidate0.payMode,
            paymentInstrument: this.formValidate1.qrcode,
            jyPassword: this.formValidate1.jypassword,
            remark: ''
          }).then(response => {
            var resp = response.body;
            if (resp.code == 0) {
              this.$Message.success(this.$t('uc.account.save_success'));
              this.handleReset(name);
            } else {
              this.$Message.error(resp.message);
            }
          });
        } else {
          this.$Message.error(this.$t("uc.safe.save_failure"));
        }
      });
    },
    getUser() {
      this.$http.post(this.host + '/api/uc/approve/account/setting').then(response => {
        var resp = response.body;
        if (resp.code == 0) {
          this.user = resp.data;
        } else {
          this.$Message.error(resp.message);
        }
      });
    },
    getSysUser() {
      this.$http.post(this.host + '/api/uc/ancillary/system/app/user').then(response => {
        var resp = response.body;
        if (resp.code == 0) {
          this.sysUser = resp.data;
        } else {
          this.$Message.error(resp.message);
        }
      });
    }
  },
  
  created() {
    this.getSysUser();
    this.getUser();
  },
  computed: {

  }
};
</script>
<style scoped>
.divide-box {
  border-bottom: 1px dashed #27313e;
  margin-bottom: 24px;
  width: 100%;
}
.qrcode-box {
  border-radius: 4px;
  border: 1px solid #27313e;
  display: inline-block;
}
.acc_sc {
  border-top: 1px dashed #27313e;
  padding-top: 6px;
  text-align: center;
}
.table-inner {
  position: relative;
  text-align: left;
  border-radius: 3px;
}

.acb-p1 {
  font-size: 16px;
  font-weight: 400;
  line-height: 50px;
}

.acb-p2 {
  font-size: 13px;
  line-height: 24px;
  color: #8c979f;
}

.action-inner {
  width: 100%;
  display: table;
}

.action-inner .inner-box {
  display: table-cell;
  width: 100%;
}

.action-box .title .copy {
  user-select: text;
}

.action-box .title a.link-copy {
  font-size: 14px;
  margin-left: 20px;
  color: #f0a70a;
}

.hb-night a {
  text-decoration: none;
  color: #7a98f7;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.action-box .title a.link-qrcode {
  margin-left: 20px;
  font-size: 14px;
  position: relative;
  color: #f0a70a;
}

.hb-night a {
  text-decoration: none;
  color: #7a98f7;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

.action-box .subtitle {
  font-size: 12px;
  margin-top: 30px;
}

.action-content {
  width: 100%;
  margin-top: 30px;
  /* overflow: hidden; */
  display: table;
  color: #ccc;
}

.action-box .title {
  margin-top: 20px;
  font-size: 20px;
  user-select: none;
}

.action-box .title .show-qrcode {
  position: absolute;
  top: -100px;
  left: 40px;
  padding: 10px;
  background: #FFF;
}

.action-inner .inner-box.deposit-address {
  width: 80%;
}

p.describe {
  font-size: 16px;
  font-weight: 600;
}
.merchant-icon {
  display: inline-block;
  margin-left: 4px;
  background-size: 100% 100%;
}

.merchant-icon.tips {
  width: 4px;
  height: 22px;
  margin-right: 10px;
  background: #f0a70a;
}

.bill_box {
  width: 100%;
  height: auto;
  /* overflow: hidden; */
}

.nav-right {
  height: auto;
  overflow: hidden;
  padding: 0 15px;
}

.order_box {
  width: 100%;
  background: #fff;
  height: 56px;
  line-height: 56px;
  margin-bottom: 20px;
  border-bottom: 2px solid #ccf2ff;
  position: relative;
  text-align: left;
}

.order_box a {
  color: #8994a3;
  font-size: 16px;
  padding: 0 30px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  line-height: 54px;
  display: inline-block;
}

.order_box .search {
  position: absolute;
  width: 300px;
  height: 32px;
  top: 12px;
  right: 0;
  display: flex;
  /* border: #c5cdd7 solid 1px; */
}





.merchant-top {
  height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 15px;
  margin-bottom: 8px;
}
.merchant-top .tips-word {
  -webkit-box-flex: 2;
  -ms-flex-positive: 2;
  flex-grow: 2;
  text-align: left;
}
.account-item {
    margin-bottom: 10px;
}

.account-item .account-item-in {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 15px 30px 15px 50px;
    -webkit-box-shadow: 0 1px 0 0 rgba(69, 112, 128, 0.06);
    box-shadow: 0 1px 0 0 rgba(69, 112, 128, 0.06);
    font-size: 14px;
    color: #fff;
}

.account-item .account-item-in .icons {
    height: 17px;
    width: 17px;
    display: inline-block;
    margin-top: -1px;
    background-size: 100% 100%;
}

.account-item .account-item-in .bankfor {
    background-image: url(../../assets/img/bankcard.png);
}

.icons.alipay {
    background-image: url(../../assets/img/alipay.png);
}

.icons.wechat {
    background-image: url(../../assets/img/wechat.png);
}

.account-item .account-item-in .card-number {
    width: 142px;
    height: 40px;
    margin-right: 15px;
    border-right: 1px dashed #27313e;
    padding: 0 15px;
    line-height: 40px;
    text-align: left;
    display: inline-block;
}

.account-item .account-item-in .bankInfo {
    width:70%;
    text-align: left;
    color: rgb(130, 142, 161);
    font-size: 13px;
}

.account-item .account-item-in .btn {
    padding: 8px 10px;
    cursor: pointer;
    color: #f0a70a;
}

</style>
